<template>
	<view class="personal-info-page">
		<view class="up-view">
			<view class="custom-navbar">
				<view class="nav-left"><!-- //@click="goBack" -->
					<!-- <global-arrow direction="left" :size="29" color="#fff"></global-arrow> -->
				</view>
				<view class="nav-title">
					<text class="title"></text>
				</view>
				<view class="nav-right">
				</view>
			</view>
		</view>

		<!-- 信息列表 -->
		<view class="info-list">
			<view class="cardUp" v-if="order.status !== '已取消'">
				<view class="qrcode-area">


					<text class="qrcode-label">核销码{{ order.verificationCode }}</text>
					<canvas id="qrcode" canvas-id="qrcode" style="width: 200rpx;height: 200rpx"></canvas>

				</view>
			</view>

			<view class="cardUp">
				<!-- 订单信息 -->
				<view class="info-card">
					<view class="info-order">
						<text class="info-title">维修信息</text>
					</view>

					<view class="info-item">
						<text class="label">维修单号：</text>
						<text class="value">{{ order.orderNo }}</text>
					</view>
					<view class="info-item">
						<text class="label">维修状态：</text>
						<text class="value" :class="getStatusClass(order.status)">{{ order.status }}</text>
					</view>
					<view class="info-item">
						<text class="label">车主姓名：</text>
						<text class="value">{{ order.ownerName }}</text>

					</view>
					<view class="info-item">
						<text class="label">联系方式：</text>
						<text class="value">{{ order.phone }}</text>
					</view>
					<view class="info-item" v-if="order.reserveTime">
						<text class="label">维修方式：</text>
						<text class="value">{{ order.repairType }}</text>
					</view>
					<view class="info-item">
						<text class="label">取车位置：</text>
						<text class="value">{{ order.pickupLocation }}</text>
					</view>
					<view class="info-item">
						<text class="label">预约日期：</text>
						<text class="value">{{ order.reserveDate }}</text>
					</view>
					<view class="info-item">
						<text class="label">提交日期：</text>
						<text class="value">{{ order.submitDate }}</text>
					</view>
				</view>
			</view>
			<view class="cardUp">
				<!-- 订单信息 -->
				<view class="info-card">
					<view class="info-order">
						<text class="info-title">车辆信息</text>
					</view>

					<view class="info-item">
						<text class="label">车辆类型：</text>
						<text class="value">{{ order.carType }}</text>
					</view>
					<view class="info-item">
						<text class="label">车牌号：</text>
						<text class="value">{{ order.licensePlate }}</text>
					</view>
					<view class="info-item-img">
						<text class="label">整车照片：</text>
						<view class="part-photos">
							<image :src="order.wholeCarImg" mode="widthFix"></image>
						</view>
					</view>
					<view class="info-item-img">
						<text class="label">维修部位照片：</text>
						<view class="part-photos">
							<image v-for="(img, idx) in order.partImgs" :key="idx" :src="img" mode="widthFix">
							</image>
						</view>
					</view>
				</view>
			</view>

		</view>


		<!-- 底部操作按钮（根据状态显示不同按钮） -->
		<view class="cancel-btn1">
			<button v-if="order.status === '进行中'" class="cancel-btn" @click="toggle('center')">取消订单</button>
		</view>
		<uni-popup ref="alertDialog">
			<view class="popup-content">
				<!-- 提示窗示例 -->
				<!-- <uni-popup ref="alertDialog" type="dialog"> -->
				<uni-popup-dialog :type="msgType" cancelText="取消" confirmText="确认" content="确认取消预约么？"
					@confirm="confirmCancel" @close="dialogClose">
				</uni-popup-dialog>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	// 引入uqrcodejs依赖
	import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode';
	export default {
		data() {
			return {
				order: {}, // 订单数据
				showCancelPopup: false,
				options: {
					margin: 10
				}
			};
		},
		onReady() {
			this.ToQrCode();
		},
		onLoad(options) {
			const {
				id
			} = options;
			this.getRepairRecord(id);
		},
		methods: {
			// 转为二维码
			ToQrCode() {
				// 获取uQRCode实例
				var qr = new UQRCode();
				// <设置二维码内容>
				qr.data = 'https://baike.baidu.com/item/%E8%91%AC%E9%80%81%E7%9A%84%E8%8A%99%E8%8E%89%E8%8E%B2/50604116';
				// qr.data ='https://www.douyin.com/jingxuan?modal_id=7358991400161119551';
				// 设置二维码大小，必须与canvas设置的宽高一致!!!
				qr.size = 100;
				// 调用制作二维码方法
				qr.make();
				// 获取canvas上下文
				var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
				// 设置uQRCode实例的canvas上下文
				qr.canvasContext = canvasContext;
				// 调用绘制方法将二维码图案绘制到canvas上
				qr.drawCanvas();
			},
			getRepairRecord(id) {
				uni.showLoading({
					title: "加载中..."
				});
				setTimeout(() => {
					uni.hideLoading();
					// 模拟根据 ID 获取订单详情
					let mockOrder = {};
					if (id == 1) {
						mockOrder = {
							id: 1,
							orderNo: "ORD2023001",
							status: "进行中",
							verificationCode: "WE343235V",
							qrcodeUrl: "/static/qrcode.png",
							ownerName: "张三",
							phone: "13800138000",
							repairType: "到店维修",
							pickupLocation: "山阳区32号",
							reserveDate: "2022/11/10 11:00",
							submitDate: "2022/11/08 12:34",
							carType: "大客车",
							licensePlate: "豫JA5323",
							wholeCarImg: "/static/images/微信图片_20250825152232_96_173.jpg",
							partImgs: [
								"/static/images/微信图片_20250825152232_96_173.jpg",
								"/static/images/微信图片_20250825152232_96_173.jpg",
								"/static/images/微信图片_20250825152232_96_173.jpg"
							]
						};
					} else if (id == 3) {
						mockOrder = {
							id: 3,
							orderNo: "ORD2023003",
							status: "已完成",
							ownerName: "李四",
							phone: "13900139000",
							repairType: "到店维修",
							pickupLocation: "山阳区33号",
							reserveDate: "2022/11/09 10:00",
							submitDate: "2022/11/07 12:34",
							carType: "小轿车",
							licensePlate: "豫JB5324",
							wholeCarImg: "/static/images/微信图片_20250825152232_96_173.jpg",
							partImgs: [
								"/static/images/微信图片_20250825152232_96_173.jpg",
								"/static/images/微信图片_20250825152232_96_173.jpg",
								"/static/images/微信图片_20250825152232_96_173.jpg"
							]
						};
					} else if (id == 2) {
						mockOrder = {
							id: 2,
							orderNo: "ORD2023004",
							status: "已取消",
							ownerName: "王五",
							phone: "13700137000",
							repairType: "上门取车",
							pickupLocation: "山阳区34号",
							reserveDate: "2022/11/08 09:00",
							submitDate: "2022/11/06 12:34",
							carType: "SUV",
							licensePlate: "豫JC5325",
							wholeCarImg: "/static/images/微信图片_20250825152232_96_173.jpg",
							partImgs: [
								"/static/images/微信图片_20250825152232_96_173.jpg",
								"/static/images/微信图片_20250825152232_96_173.jpg",
								"/static/images/微信图片_20250825152232_96_173.jpg"
							]
						};
					}
					this.order = mockOrder;
				}, 1000);
			},
			showCancelConfirm() {
				this.showCancelPopup = true;
			},
			confirmCancel() {
				this.showCancelPopup = false;
				uni.showToast({
					title: "订单已取消",
					icon: "success"
				});
				this.order.status = "已取消";
			},
			getStatusClass(status) {
				if (status === "进行中") return "status-ongoing";
				if (status === "已完成") return "status-completed";
				if (status === "已取消") return "status-cancelled";
				return "";
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.alertDialog.open(type)
			},
		}
	};
</script>

<style scoped>
	.page {
		padding: 0 10rpx;
		background-color: #F8F8F8;
	}

	.up-view {
		padding: 0 20rpx;
		/* background: linear-gradient(to bottom, #3788FF, #0963E7); */
		color: #fff;
		padding-bottom: 250rpx;
		/* 1. 基础渐变背景（作为底层） */
		background: linear-gradient(to bottom, #3788FF, #0963E7);

		/* 2. 添加背景图（叠加在渐变上） */
		/* background-image: url('/static/icons/组 8.png'); */
		/* 背景图路径 */

		/* 3. 背景图属性设置 */
		background-repeat: no-repeat;
		/* 不重复平铺 */
		background-size: cover;
		/* 覆盖整个容器（可能裁剪） */
		/* 可选：background-size: contain; 完整显示图片（可能留空白） */

		background-position: center center;
		/* 图片居中显示 */
		background-attachment: scroll;
		/* 随内容滚动（默认值） */

		/* 图片层（在渐变上方） */
		background-blend-mode: overlay;
		/* 混合模式（可选） */
	}

	.custom-navbar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 10rpx;
		font-weight: 300;
		box-sizing: border-box;
	}

	.nav-title {
		margin-right: 17rpx;
	}

	.personal-info-page {
		background-color: #f5f5f5;
		height: 100vh;
	}


	.info-list {
		margin-top: 20rpx;
		border-radius: 100rpx;
		padding: 20rpx 20rpx 200rpx;
		margin-top: -260rpx;
	}

	.cardUp {
		border-radius: 20rpx;
		background-color: #fff;
		padding: 10rpx;
		margin-bottom: 20rpx;
	}

	.qrcode-area {
		text-align: center;
		margin: 30rpx 0 10rpx 30rpx;
	}

	.qrcode-area #qrcode {
		margin: 0 auto;
		width: 150rpx;
		height: 150rpx;
	}

	.qrcode-label {
		display: block;
		margin-bottom: 10rpx;
		font-size: 28rpx;
	}


	.title {
		font-size: 32rpx;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.verification-code {
		background-color: #fff;
		padding: 20rpx;
		margin: 10rpx;
		border-radius: 10rpx;
		text-align: center;
	}

	.code-label {
		font-size: 28rpx;
		margin-bottom: 10rpx;
		display: block;
	}

	.qrcode {
		width: 200rpx;
		height: 200rpx;
	}

	.info-card,
	.detail-card,
	.evaluation-card {
		background-color: #fff;
		padding: 20rpx;
		padding-bottom: 0;
		margin: 10rpx;
		border-radius: 10rpx;
	}

	.info-order {
		margin-bottom: 20rpx;
		padding-bottom: 10rpx;
		margin-left: -20rpx;
		border-bottom: 4rpx solid #F8F8F8;
	}

	.info-order>text:nth-child(1) {
		font-size: 30rpx;
	}

	.info-title,
	.detail-title,
	.evaluation-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 15rpx;
		color: #333;
	}



	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
	}


	.part-photos {
		display: flex;
	}

	.part-photos image {
		width: 150rpx;
		margin-top: 30rpx;
		margin-bottom: 20rpx;
		margin-right: 30rpx;
	}

	.label {
		font-size: 20rpx;
		color: #000;
	}

	.value {
		font-size: 20rpx;
		color: #a3a3a3;
	}

	.cancel-btn1 {
		background-color: #fff;
		padding: 20rpx 0;
	}

	.cancel-btn {
		background: linear-gradient(to right, #3789FF, #0362E6);
		margin-right: 40rpx;
		font-size: 26rpx;
		border-radius: 50rpx;
		width: 200rpx;
		color: #fff;
	}

	.popup-content {
/* 		@include flex; */
		align-items: center;
		justify-content: center;
		font-size: 20rpx;
		padding: 40rpx 40rpx;
		width: 80vw;
		border-radius: 50rpx;
		background-color: #fff;
	}

	.popupTitle {
		margin-left: 190rpx;
		font-size: 30rpx;
	}

	.popup-btns {
		margin: 20rpx auto 0;
		display: flex;
		width: 60vw;
	}

	.cancel-popup-btn {
		background-color: #F3F3F3;
		width: 150rpx;
		font-size: 26rpx;
		border-radius: 40rpx;
		color: #000;
	}

	.confirm-popup-btn {
		background-color: #007aff;
		width: 150rpx;
		border-radius: 40rpx;
		font-size: 26rpx;
		color: #fff;
	}
</style>